import myComponent1 from "./myComponent1";
import zyyu from "./作用域插槽";
export default {
    name:"instructions",
    components:{
        myComponent1,zyyu
    },
    data(){
        return {
            htmlCode:'<h1>v-html指令使用</h1>',
            value:1213,
            text:'',
            visible:false
        };
    },
    watch:{
        value(val){
            console.log("v-model",val);
        },
        text(val){
            console.log("v-model",val);
        }
    },
    methods:{
        handleClick(val){
            console.log(val);
        },
        input(e){
            this.text = e.target.value;
        },
        clickOnce(val){
            console.log(val);
        },
        clickHanler(val){
            console.log(val);
        },
        $_handleClick(e){
            console.log(e,2222)
        },
        $_renderTemp(){
            if(this.visible){
                return (
                    <div>
                        <div>可切换内容</div>
                        <div>
                            <input v-model={this.text}/>
                            <button onclick={()=>this.visible=false}>关闭</button>
                        </div>
                    </div>

                );
            } else {
                return (
                    <div></div>
                )
            }

        }
    },
    render(){
        const {htmlCode} = this;
        let bool = true;
        let list = [1,2,3];
        const butonsInput = this.$_renderTemp();
        return (
            <div>
                {{/*v-html*/}}
                <div domPropsInnerHTML={htmlCode}></div>
                {/*v-if*/}
                {bool ? <button>ann1</button> : <button>ann2</button>}
                <div>
                    {/*v-for*/}
                    {list.map((item)=>(
                        <button>1按钮{item}</button>
                    ))}
                    {/*v-model*/}
                    <input v-model={this.value}/>
                    <input v-model_trim={this.value}/>
                    <input type='text' value={this.text} oninput={this.input}/>

                    {/*监听事件*/}
                    <button type="button" onclick={this.handleClick.bind(this,11)}>
                        点击bind
                    </button>
                    <button type="button" onClick={()=>this.handleClick(111)}>
                        点击箭头函数
                    </button>
                    {/*事件修饰符*/}
                    <button
                        type='button'
                        on={{
                            "~click":()=>this.clickOnce("只能点一次")
                        }}>事件修饰符只能点一次</button>
                    <button
                        type='button'
                        on={{
                            "click":()=>this.clickHanler("可以点多次")
                        }}>事件修饰符点多次</button>

                    <input
                        type='input'
                        on={{
                            focus:this.$_handleClick,
                            input:this.$_handleClick
                        }}>事件修饰符点多次</input>
                    <div
                        on={{
                            // 相当于 :click.capture
                            '!click': this.$_handleClick,
                            // 相当于 :input.once
                            '~input': this.$_handleClick,
                            // 相当于 :mousedown.passive
                            '&mousedown': this.$_handleClick,
                            // 相当于 :mouseup.capture.once
                            '~!mouseup': this.$_handleClick
                        }}>各种事件</div>
                </div>
                <div>
                    <button onclick={()=>this.visible=true}>打开</button>
                    {
                        this.visible ?
                            <div>{butonsInput}</div>
                            :
                            ''
                    }
                    {butonsInput}

                </div>
                <my-component1 visible={this.visible}>
                    <div>我是默认插槽内容</div>
                    <template slot="myslot">
                        我是myslot插槽内容
                    </template>
                </my-component1>
                <my-component1 visible={this.visible}>
                    <div>我是默认插槽内容</div>
                    <template slot="myslot">
                        我是myslot插槽内容
                    </template>
                </my-component1>
                <zyyu
                    visible={this.visible}
                    {...{
                        scopedSlots: {
                            test: ({ user }) => <div style="color:blue;">{user.name}</div>,
                            mytest:({ user }) => <div style="color:blue;">{user.name}111</div>,
                        }
                    }}
                >

                </zyyu>
            </div>
        )
    }
}
